<template>
  <div class="m-pageView">
    <div class="m-searchPanel">
      <div class="layout-1"><span class="leftLine"></span>查询条件</div>
      <div class="layout-2">
        <el-form :model="searchForm" :inline="true" ref="searchForm">
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item class="select-timepick">
                  <el-select placeholder="请选择" v-model="searchForm.typetimeFH">
                    <el-option label="呼出时间" value="bill"></el-option>
                </el-select>
                <el-date-picker
                  v-model="searchForm.timeFH"
                  type="datetimerange"
                  :editable="false"
                  :default-time="['00:00:00','23:59:59']"
                  format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                  :unlink-panels="true"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="线路">
                    <el-select v-model="searchForm.context" placeholder="请选择">
                    <el-option v-for="label in labelFilters" :label="label.text" :value="parseInt(label.value)"
                                :key="label.value"></el-option>
                    </el-select>
                </el-form-item>      
            </el-col>
            <el-col :span="7" class="searchBtns" :offset="0">
                <el-button type="text"
                         @click="showMoreSearchChoise =!showMoreSearchChoise"><span>更多条件</span>
                <i :class="{
                    'el-icon-arrow-down':!showMoreSearchChoise,
                    'el-icon-arrow-up':showMoreSearchChoise,
                    }"></i>
                </el-button>
              <el-button type="primary" icon="el-icon-search" @click="search" :loading="dataListLoading">查询</el-button>
              <el-button type="primary" plain icon="el-icon-refresh" @click="reset">重置</el-button>
            </el-col>
          </el-row>
            <el-collapse-transition>
                    <el-row :gutter="30" v-if="showMoreSearchChoise">
                        <el-col :span="12">
                            <el-form-item class="calltime">
                                <el-row class="calltime-row">
                                    <el-col :span="7">
                                        <el-select v-model="searchForm.typequeryTypeFH" class="calltime-begin-select" @change="queryTypeChange">
                                            <el-option label="通话时长  ≥" value="billStart"></el-option>
                                            <el-option label="通话时长  <" value="billEnd"></el-option>
                                            <el-option label="通话时长  区间" value="3"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="11">
                                        <el-row v-if="searchForm.typequeryTypeFH != 3">
                                            <el-col :span="24" class="calltime-content">
                                                <el-input placeholder="请输入通话时长" v-model.trim="searchForm.queryTypeFH" clearable>

                                                </el-input>
                                            </el-col>
                                        </el-row>
                                        <el-row v-else>
                                            <el-col :span="10" class="calltime-content-left">
                                                <el-input v-model="searchForm.billStart" placeholder="请输入" name="billStart"></el-input>
                                            </el-col>
                                            <el-col :span="4" class="space">
                                                <span>至</span>
                                            </el-col>
                                            <el-col :span="10" class="calltime-content-right">
                                                <el-input v-model="searchForm.billEnd" placeholder="请输入" name="billEnd"></el-input>
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-select v-model="searchForm.billType" class="calltime-end-select">
                                            <el-option v-for="label in typeUnitFilters" :label="label.text" :value="parseInt(label.value)"
                                                        :key="label.value"></el-option>
                                        </el-select>
                                    </el-col>

                                </el-row>

                            </el-form-item>        
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="状态">
                                    <el-select v-model="searchForm.callStatus" placeholder="请选择">
                                        <el-option v-for="label in callStatusFilters" :label="label.text" :value="parseInt(label.value)"
                                                    :key="label.value"></el-option>
                                    </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="类型">
                                    <el-select v-model="searchForm.type" placeholder="请选择">
                                        <el-option v-for="label in callTypeFilters" :label="label.text" :value="parseInt(label.value)"
                                                    :key="label.value"></el-option>
                                    </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item class="input-with-select tele-timepick">
                                <el-row class="extra-row">
                                    <el-col :span="7">
                                        <el-select v-model="searchForm.typeinputFH">
                                            <el-option label="分机号" value="callerId"></el-option>
                                            <el-option label="员工姓名" value="csName"></el-option>
                                            <el-option label="员工工号" value="csNo"></el-option>
                                            <el-option label="客户电话" value="customer"></el-option>
                                            <el-option label="单号" value="followId"></el-option>
                                            <el-option label="呼叫系统流水号" value="serialNo"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="17">
                                        <el-input v-model="searchForm.inputFH" placeholder="请输入" clearable>
                                            
                                        </el-input>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                        </el-col>
                    </el-row>
            </el-collapse-transition>
        </el-form>
      </div>
    </div>
    <div class="m-dataLayout">
      <div class="m-searchListPanel">
        <div class="layout-1"><span class="leftLine"></span>信息列表</div>
      </div>
      <div class="m-dataList">
        <el-table
          :data="dataList"
          v-loading="dataListLoading"
          element-loading-text="loading..."
          style="width: 100%"
          max-height="500"
          ref="tableList"
          @sort-change="tableSortBy"
        >
          <el-table-column
            prop="followId"
            label="单号"
            :formatter="formatterLabelType"
            width="160">
          </el-table-column>
          <el-table-column
            prop="serialNo"
            width="200"
            label="呼叫系统流水号">
            <template slot-scope="scope">
              <el-button type="text" @click="showInfo(scope.row)">{{scope.row.name}}</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="context"
            label="线路"
            width="100">
          </el-table-column>
          <el-table-column
            prop="type"
            label="类型"
            width="100">
          </el-table-column>
          <el-table-column
            prop="callTime"
            label="呼出时间"
            width="160">
          </el-table-column>
          <el-table-column
            prop="callerId"
            label="分机号"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="csName"
            label="员工姓名"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="csNo"
            label="工号"
            min-width="120">
          </el-table-column>
          <el-table-column
            prop="customer"
            label="客户电话"
            min-width="120">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="billSec"
            label="通话时长（秒）"
            sortable="custom"
            min-width="160">
          </el-table-column>
          <el-table-column
            prop="billMin"
            label="通话时长（分钟）"
            sortable="custom"
            min-width="160">
          </el-table-column>
          <el-table-column
            prop="dfs"
            label="录音"
            min-width="200">
          </el-table-column>
          <!-- <el-table-column
            fixed="right"
            v-if="buttonAuthority.label && (buttonAuthority.label.delete || buttonAuthority.label.edit)"
            label="操作"
            align="center"
            width="110">
            <template slot-scope="scope">
              <el-dropdown trigger="click" @command="type => handleOperation(type, scope.row)">
                <el-button
                  type="text"
                  icon="el-icon-arrow-down"
                  size="small">
                  更多操作
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="edit" v-if="buttonAuthority.label && buttonAuthority.label.edit">编辑
                  </el-dropdown-item>
                  <el-dropdown-item command="delete" v-if="buttonAuthority.label && buttonAuthority.label.delete">删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <div class="m-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes=pagination.pageSizeList
          :current-page=pagination.pageNo
          :page-size=pagination.pageSize
          layout="total, sizes, prev, pager, next"
          :total=pagination.total>
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      class="m-dialog"
      @close="closeAddDialog"
      width="600px">
      <el-form :model="labelForm" ref="labelForm" :rules="rules" :inline="true" label-position="left"
               label-width="80px">
        <el-form-item label="标记范围" prop="type">
          <el-select v-model="labelForm.type" placeholder="请选择" clearable :disabled="showDialogType != 'add'">
            <el-option v-for="label in labelFilters" :label="label.text" :value="parseInt(label.value)"
                       :key="label.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标记名称" prop="name">
          <el-input v-model="labelForm.name" placeholder=""
                    :disabled="showDialogType == 'show'"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="labelDesc">
          <el-input type="textarea" v-model="labelForm.labelDesc" :disabled="showDialogType == 'show'"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible=false">取 消</el-button>
          <el-button v-if="showDialogType != 'show'" type="primary" @click="submitLabel" :loading="addLoading">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import * as Utils from "@/utils";
  import * as teleAPI from "@/Api/telesys";
  export default {
    name: "Label",
    data() {
      return {
        showMoreSearchChoise: false,  //显示更多筛选条件
        searchForm: {
            typetimeFH: 'bill',
            timeFH: Utils.thisWeek(),
            typequeryTypeFH: "billStart",
            type: '',
            billType: 1,//1=秒;2=分钟;
            typeinputFH: 'callerId',
            context: '',
            status: ''
        },
        typeUnitFilters: [
            {text: '秒', value: '1'},
            {text: '分钟', value: '2'}
        ],
        labelFilters: [
          {text: "线路1", value: "1"},
          {text: "线路2", value: "2"},
          {text: "线路3", value: "3"}
        ],
        callTypeFilters: [
            {text: '呼出', value: '1'},
            {text: '呼入', value: '2'},
        ],
        callStatusFilters: [
            {text: '接通', value: '1'},
            {text: '未接通', value: '2'},
            {text: '忙线', value: '3'},
            {text: '失败', value: '4'},
        ],
        dataListLoading:false,
        addLoading: false,
        dataList: [],
        sortInfo: {},
        activeRow: {},
        showDialogType: '',//弹窗类型
        pagination: Utils.commonPagination(),
        dialogVisible: false,
        labelForm: {},
        rules: {
          type: {
            required: true, message: "请选择标记范围", trigger: "blur"
          },
          name: [
            {required: true, message: "请输入标记名称", trigger: "blur"},
            {max: 50, message: "标记名称长度不能超过50个字符", trigger: "blur"},
//            {pattern: /^[a-zA-Z0-9\_\.]+$/, message: "由字母、数字、下划线或小数点组成", trigger: "blur"}
          ]
        },
        ajaxSearchParams:{},
        pickerOptions: Utils.pickerOptions(),
        phoneTimes: ''
      };
    },
    computed: {
      ...mapGetters(["buttonAuthority"]),
      dialogTitle(){
        if (this.showDialogType == 'edit') {
          return '编辑标记';
        } else if (this.showDialogType == 'show') {
          return '查看标记'
        } else if (this.showDialogType == 'add') {
          return '创建标记'
        }
      }
    },
    created() {
      this.search();
    },
    methods: {
      tableSortBy(data) {
        if (!data.order) {
          return;
        }
        this.sortInfo.orderParam = data.prop;
        this.sortInfo.orderType = data.order.substr(0, data.order.length - 6);
        this.queryData();
      },
      formatterLabelType(row){
        for (let i = 0; i < this.labelFilters.length; i++) {
          if (this.labelFilters[i].value == row.type) {
            return this.labelFilters[i].text
          }

        }
      },
      queryData() {
        this.dataListLoading = true;
        teleAPI.callQuery(Object.assign({
          pageSize: this.pagination.pageSize,
          pageNo: this.pagination.pageNo
        }, this.ajaxSearchParams, this.sortInfo))
          .then(res => {
            this.dataListLoading = false;
            if (res.code != '0') {
              this.$notify.warning({
                title: '温馨提示',
                message: res.msg
              })
              return;
            }
            let resData = res.data;
            this.dataList = resData.data;
            this.pagination.total = resData.total;
          })
          .catch(error => {
            console.log(error);
            this.dataListLoading = false;
          })
      },
      closeAddDialog() {
        this.labelForm = {
          type: "",
          name: "",
          labelDesc: "",
          color: ""
        }
        this.$refs.labelForm.resetFields();
      },
      search() {
        this.ajaxSearchParams = Utils.searchParamsFormat(this.searchForm);
        if (this.pagination.pageNo == 1) {
          this.queryData();
        } else {
          this.pagination.pageNo = 1;
        }
      },
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        if (this.pagination.pageNo == 1) {
          this.queryData();
        } else {
          this.pagination.pageNo = 1;
        }
      },
      handleCurrentChange(index) {
        this.pagination.pageNo = index;
        this.queryData();
      },
      handleOperation(type, row) {
        switch (type) {
          case "edit":
            this.activeRow = {
              type: row.type,
              name: row.name,
              id: row.id,
              labelDesc: row.labelDesc,
            };
            this.labelForm = Object.assign({}, this.activeRow);
            this.showDialogType = 'edit';
            this.dialogVisible = true;
            break;
          case "delete":
            this.deleteLabel(row);
            break;
        }
      },
      createLabel() {
        this.showDialogType = 'add';
        this.dialogVisible = true;
      },
      showInfo(row) {
        this.labelForm = {
          type: row.type,
          name: row.name,
          id: row.id,
          labelDesc: row.labelDesc,
        };
        this.showDialogType = 'show';
        this.dialogVisible = true;
      },
      reset() {
        this.searchForm = {
          name: "",
          type: null
        };
      },
      submitLabel() {
        this.$refs.labelForm.validate(flg => {
          if (!flg) {
            return;
          }
          this.addLoading = true;
          let params = {};
          if (this.showDialogType == 'add') {
            let _colorList = ['#D3E9FF', '#FFCDD7', '#FFE4C7', '#D1EEE2'];
            params = this.labelForm
            params.color = _colorList[Math.floor((Math.random() * (_colorList.length - 1)))]
          } else if (this.showDialogType == 'edit') {
            params = Object.assign({}, this.labelForm, Utils.updateFormItemCopy(this.activeRow));
          }
          teleAPI[this.showDialogType == 'edit' ? 'labelEdit' : 'labelCreate'](params)
            .then(res => {
              this.addLoading = false;
              if (res.code != '0') {
                this.$notify.warning({
                  title: '温馨提示',
                  message: res.msg
                })
                return;
              }
              if (this.pagination.pageNo == 1) {
                this.queryData();
              } else {
                this.pagination.pageNo = 1;
              }
              this.dialogVisible = false;
              this.$message.success(`${this.showDialogType == 'edit' ? '修改' : '新建'}成功`)
            })
            .catch(error => {
              this.addLoading = false;
              console.log(error);
            })
        })
      },
      queryTypeChange (data) {
            let sectionForm = { billStart: '', billEnd: '' };
            if(data == '3'){//区间
                Object.assign(this.searchForm, sectionForm);
            }else{
                for(let attr in this.searchForm) {
                    if(attr == 'billStart' || attr == 'billEnd'){
                        delete this.searchForm[attr];
                    }
                }
            }
      }
    }
  };
</script>

<style scoped lang="scss">
</style>
